/**
 * PageH5ARContent
 */

import React, {Component} from 'react';
import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import pageJumpActions from '../../../actions/Editor/pageJump';
import pagesActions from '../../../actions/Editor/pages';
import tool from "../../../utils/tool";
import ColorPicker from "./ColorPicker";
import consts from "../../../utils/consts";

class PageH5ARContent extends Component{
    handleOnPageJumpClick (type, val){
        const {pageJump,updatePageJump} = this.props;
        let param = {};
        param[type] = !val;
        updatePageJump(param);
    }
    handleOnPageBack (type, val){
        const {page,updatePage} = this.props;
        const {page_background} = page || {};
        if (parseInt(val) == 0 && !page_background.backgroundColor){
            page_background.backgroundColor = 'eaedee';
        }
        page_background[type] = parseInt(val);
        let param = {
            page_background: page_background,
            page_id: page.page_id
        };
        updatePage(param);
    }
    handleOnChangePictureDialog (type, e){
        console.log("open dialog");
//        var root = this.props.root;
//        if (type == "pageBack"){
//            root.setState({
//                is_page_back: true
//            });
//        }
//        root.openDialog(consts.DIALOG_TYPE.UPLOAD_PICTURE);
    }
    render (){
        const {page,pageJump} = this.props;
        const {h5_has_turning_tip,h5_shared_switch: h5_share_switch} = pageJump;
        const {page_background} = page;
        let pageBack = page_background;
        let h5_shared_switch = h5_share_switch || 0;
        if (!pageBack){
            pageBack = {
                url: "" ,
                custom : 1,
                backgroundColor: "#eaedee"
            }
        }
        let pageBackUrl = pageBack.url || "";
        let pageBackColor = pageBack.backgroundColor || "#FFFFFF";
        let custom_page = pageBack.custom;
        console.log(page_background)
        let uploadedStyle = {};
        if (custom_page && pageBackUrl){
            // 上传后的样式
            uploadedStyle = {
                backgroundSize: "cover",
                background: "url(" + pageBackUrl + ") no-repeat center"
            };
        }

        let pageBackImgNode = "";
        if (custom_page){
            pageBackImgNode =
                <div className="widget-meta-custom">
                    <div type="button" tabIndex="-1" className="custom-image-btn-img fixed_custom" data-type="pageBack" onClick={this.handleOnChangePictureDialog.bind(this, "pageBack")} style={uploadedStyle}>
                        <span className= {pageBackUrl? "uploadedStyle" : ""} data-type="pageBack">{$._("Upload custom image")}</span>
                    </div>
                    <div className="meta-custom-tips">640*1010 .png,.jpg</div>
                </div>
        } else {
            pageBackImgNode = <ColorPicker parent={this} />
        }
        return (
            <div className="h5_turing_info">
                <div className="rowlist">
                    <div className="h5-item">
                        <span>H5翻页提示</span>
                        <div className={"page-item page-item-turning info-item-icon " + (h5_has_turning_tip ? "icon-uniF52F" : "icon-uniF471")} onClick={(e) => this.handleOnPageJumpClick("h5_has_turning_tip",h5_has_turning_tip)} name="h5_has_turning_tip"></div>
                    </div>
                </div>
                <div className="h5PageBack">
                    <div className="pageBackTitle">H5页面背景</div>
                    <div className="standard">
                        <div className={"page-item " +(!custom_page? "activebtn" : "noactivebtn")} name="custom" id="page_back_custom" onClick={() => this.handleOnPageBack("custom", 0)}>
                            <span>{$._("Color")}</span>
                        </div>
                        <div className={"page-item " +(custom_page == 1 ? "activebtn" : "noactivebtn")} name="custom" id="page_back_custom1" onClick={() => this.handleOnPageBack("custom", 1)}>
                            <span>{$._("Picture")}</span>
                        </div>
                    </div>
                    {pageBackImgNode}
                </div>
            </div>
        )
    }
 }

 const mapStateToProps = ({ editor, widgets, timelines , pages, pageJump, pageTimelines}) => {
  const pageId = editor.selectedPageId;
  return {
      page: pages.filter(p => p.page_id === pageId)[0],
      pageJump,
      pageTimelines: pageTimelines.filter(p => p.page_id === pageId)[0]
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({...pageJumpActions,...pagesActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(PageH5ARContent);
